import { useNavigate } from 'react-router-dom'
import { Typography } from 'antd'
import { useTranslation } from 'react-i18next'
import LoginModal from '../../components/common/LoginModal'
import { ROUTES } from '../../router/routes'
import './LoginPage.css'

const { Title } = Typography

function LoginPage() {
  const { t } = useTranslation()
  const navigate = useNavigate()

  // 登录成功后跳转到首页
  const handleLoginSuccess = () => {
    navigate(ROUTES.HOME, { replace: true })
  }

  return (
    <div className="login-container">
      <div className="login-header">
        <div className="login-logo">{t('loginPage.logo')}</div>
        <Title level={2} className="login-title">
          {t('loginPage.title')}
        </Title>
        <Typography.Text type="secondary" className="login-subtitle">
          {t('loginPage.subtitle')}
        </Typography.Text>
      </div>

      <LoginModal
        visible={true}
        onClose={() => {}}
        onLoginSuccess={handleLoginSuccess}
        closable={false}
      />
    </div>
  )
}

export default LoginPage
